<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" inline label-width="80px">
      <el-form-item prop="searchValue">
        <el-input
          v-model="queryParams.searchValue"
          placeholder="请输入关键字"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
          查询
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-card class="box-card">
      <el-radio-group v-model="serverStatus" size="mini" @input="getList">
        <el-radio-button :label="null">所有</el-radio-button>
        <el-radio-button label="ACTIVE">运行中</el-radio-button>
        <el-radio-button label="SHUTOFF">已停止</el-radio-button>
        <el-radio-button label="DELETED">已删除</el-radio-button>
        <el-radio-button label="EXPIRED">已到期</el-radio-button>
      </el-radio-group>
      <el-table
        v-loading="loading"
        :data="serverList"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          v-if="serverStatus == '所有'"
          width="55"
          align="center"
        />
        <el-table-column label="用户" align="center" prop="nickName" />
        <el-table-column label="主机号" align="center" prop="relationId" />
        <el-table-column label="计费模式" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.periodType | ctChargeType }}</span>
          </template>
        </el-table-column>
        <el-table-column label="地区" align="center" prop="regionId" />
        <el-table-column label="ip" align="center" prop="ip" />
        <el-table-column
          label="配置（CPU | 内存 | 硬盘 | 带宽）"
          align="center"
          prop="orderAbstract"
        />
        <el-table-column label="状态" align="center" prop="status">
          <template slot-scope="scope">
            <span>{{ scope.row.status | ctCloudServerStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column label="到期时间" align="center" prop="expirationTime" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="powerOn(scope.row.relationId)">
              开机
            </el-button>
            <el-button size="mini" type="text" @click="shutdown(scope.row)">
              关机
            </el-button>
            <el-button size="mini" type="text" @click="restart(scope.row)">
              重启
            </el-button>
            <!-- <el-dropdown trigger="click" @command="handleCommand($event,JSON.stringify(scope.row))">
              <span class="el-dropdown-link">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="resetPwd">重置密码</el-dropdown-item>
                <el-dropdown-item command="toChange">变更</el-dropdown-item>
                <el-dropdown-item command="switchSystem">切换系统</el-dropdown-item>
                <el-dropdown-item command="reinstallSystem">重装系统</el-dropdown-item>
                <el-dropdown-item command="buySame">购买相同配置</el-dropdown-item>
                <el-dropdown-item command="remoteLogin">远程登录</el-dropdown-item>
                <el-dropdown-item command="doSafeRules">安全组规则</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown> -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog title="关机" :visible.sync="shutdownIsOpen" width="500px" append-to-body :close-on-click-modal="false">
      <p>确定要对以下<span>1台云服务器</span>进行关机操作吗？</p>
      <el-descriptions direction="vertical" :column="4" border>
        <el-descriptions-item label="名称">
          {{ shutdownObj.relationId }}
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          {{ shutdownObj.status | ctCloudServerStatus }}
        </el-descriptions-item>
        <el-descriptions-item label="备注">
          {{ shutdownObj.periodType | ctChargeType }}
        </el-descriptions-item>
      </el-descriptions>
      <el-form
        ref="shutdownForm"
        :model="shutdownForm"
        :rules="shutdownRules"
        label-width="80px"
      >
        <el-form-item label="关机方式" prop="type">
          <el-radio-group v-model="shutdownForm.type">
            <el-radio label="HARD">强制关机</el-radio>
            <el-radio label="SOFT">普通关机</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doShutdown">确 定</el-button>
        <el-button @click="shutdownIsOpen = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="重启"
      :visible.sync="restartIsOpen"
      width="500px"
      append-to-body
      center
      :close-on-click-modal="false"
    >
      <p>确定要对以下<span>1台云服务器</span>进行重启操作吗？</p>
      <el-descriptions direction="vertical" :column="4" border>
        <el-descriptions-item label="名称">
          {{ restartObj.relationId }}
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          {{ restartObj.status | ctCloudServerStatus }}
        </el-descriptions-item>
        <el-descriptions-item label="备注">
          {{ restartObj.periodType | ctChargeType }}
        </el-descriptions-item>
      </el-descriptions>
      <el-form ref="restartForm" :model="restartForm">
        <el-form-item label="重启方式" prop="type">
          <el-radio-group v-model="restartForm.type">
            <el-radio label="HARD">强制重启</el-radio>
            <el-radio label="SOFT">普通重启</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div class="notice">强制重启会导致云服务器中未保存的数据丢失，请谨慎操作。</div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="doRestart">是</el-button>
        <el-button type="danger" @click="restartIsOpen = false">否</el-button>
      </div>
    </el-dialog>

    <!-- 续费对话框 -->
    <!-- <el-dialog title="续费" :visible.sync="restartIsOpen" width="500px" append-to-body :close-on-click-modal="false" center>
      <p>确定要对以下<span>1台云服务器</span>进行续费操作吗？</p>
      <el-descriptions direction="vertical" :column="4" border>
        <el-descriptions-item label="名称">111111</el-descriptions-item>
        <el-descriptions-item label="状态">11111</el-descriptions-item>
        <el-descriptions-item label="备注">111111</el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="submitForm">是</el-button>
        <el-button type="danger" @click="cancel">否</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import {
  listCloudServer,
  openCloudServer,
  stopCloudServer,
  restartCloudServer,
} from "@/api/productManagement/cloudServer";

export default {
  data() {
    return {
      //重启表单数据
      restartForm: {
        type: "HARD",
      },
      //重启回显的数据
      restartObj: {
        relationId: null,
        status: null,
        periodType: null,
      },
      //关机表单验证
      shutdownRules: {
        type: [{ required: true, message: "请选择关机方式", trigger: "blur" }],
      },
      //关机表单数据
      shutdownForm: {
        type: "HARD",
      },
      //关机回显的数据
      shutdownObj: {
        relationId: null,
        status: null,
        periodType: null,
      },
      serverStatus: null, //云服务器状态（表格对一个的页签）
      loading: false, // 遮罩层
      ids: [], // 选中数组
      single: true, // 非单个禁用
      multiple: true, // 非多个禁用
      total: 0, // 总条数
      serverList: [], //云服务器表格数据
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        searchValue: null, //关键字查询
      },
      form: {}, // 表单参数
      rules: {}, // 表单校验
      shutdownIsOpen: false, // 是否显示关机弹出层
      restartIsOpen: false, // 是否显示开机弹出层
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /**重启提交按钮 */
    doRestart() {
      const data = {
        reboot: {
          servers: [
            {
              id: this.restartObj.relationId,
            },
          ],
          type: this.restartForm.type,
        },
      };
      //调取重启接口
      restartCloudServer(data).then((res) => {
        if (200 === res.code) {
          this.$message.success("重启成功!");
          this.getList();
          this.restartIsOpen = false;
        }
      });
    },
    /**关机提交按钮 */
    doShutdown() {
      const data = {
        "os-stop": {
          servers: [
            {
              id: this.shutdownObj.relationId,
            },
          ],
          type: this.shutdownForm.type,
        },
      };
      //表单验证成功
      this.$refs["shutdownForm"].validate((valid) => {
        if (valid) {
          //调用关机接口
          stopCloudServer(data).then((res) => {
            if (res.code === 200) {
              this.$message.success("关机成功!");
              this.getList();
              this.shutdownIsOpen = false;
            }
          });
        }
      });
    },
    /**开机 */
    powerOn(e) {
      this.$confirm(`确定要对${e}云服务器进行开机操作吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const data = {
            "os-start": { servers: [{ id: e }] },
          };
          openCloudServer(data).then((res) => {
            if (res.code === 200) {
              this.$message.success("开机成功!");
              this.getList();
            }
          });
        })
        .catch(() => {});
    },
    /** 查询云服务器列表 */
    getList() {
      const data = {
        status: this.serverStatus,
        searchValue: this.queryParams.searchValue,
        params: {
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize,
        },
      };
      this.loading = true;
      listCloudServer(data)
        .then((res) => {
          this.serverList = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 表单重置
    reset() {
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.roleId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.roleId != null) {
            // updateRole(this.form).then(res => {
            //   this.$modal.msgSuccess("修改成功");
            //   // this.shutdownIsOpen = false;
            //   this.getList();
            // });
          } else {
            // addRole(this.form).then(res => {
            //   this.$modal.msgSuccess("新增成功");
            //   // this.shutdownIsOpen = false;
            //   this.getList();
            // });
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      this.shutdownIsOpen = false;
      this.reset();
    },
    // 打开关机对话框
    shutdown(e) {
      this.shutdownIsOpen = true;
      this.shutdownObj = e;
    },
    //重启
    restart(e) {
      this.restartIsOpen = true;
      this.restartObj = e;
    },
    //点击更多
    handleCommand(e,command) {
      const row = JSON.parse(command);
      console.log("click on item " + e ,row,'======');
    },
  },
};
</script>
<style lang="scss" scoped>
.notice {
  height: 30px;
  line-height: 30px;
  background-color: rgb(255, 251, 243);
  border: 1px solid rgb(255, 169, 98);
  padding-left: 20px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>
